﻿<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <form class="form" ng-submit="add()" name="contextEntityDetailForm" novalidate autocomplete="off">
                <fieldset>
                    <legend>New attribute</legend>
                    <div class="form-group">
                        <label class="form-label">Name</label>
                        <div class="form-input" ng-init="setForm(contextEntityDetailForm);">
                            <input ng-class="{'error': contextEntityDetailForm.attrName.$invalid && !contextEntityDetailForm.attrName.$pristine}" type="text" placeholder="Please enter name" required ng-model="newValue.name" ui-validate=" 'attributeNameValidator($value)' " name="attrName" focus-on="">
                        </div>
                        <div class="form-error" ng-if="contextEntityDetailForm.attrName.$dirty && contextEntityDetailForm.attrName.$invalid">
                            <span ng-if="contextEntityDetailForm.attrName.$error.required">Required</span>
                            <span ng-if="contextEntityDetailForm.attrName.$error.validator">Duplicate name found</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Value</label>
                        <div class="form-input">
                            <input ng-class="{'error': contextEntityDetailForm.attrValue.$invalid && !contextEntityDetailForm.attrValue.$pristine}" type="text" placeholder="Please enter value" required ng-model="newValue.value" name="attrValue">
                        </div>
                        <div class="form-error" ng-if="contextEntityDetailForm.attrValue.$dirty">
                            <span ng-if="contextEntityDetailForm.attrValue.$error.required">Required</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn" ng-disabled="contextEntityDetailForm.$invalid" type="submit">
                            <span>Add</span>
                        </button>
                    </div>
                </fieldset>
            </form>
            <fieldset>
                <legend>Current attributes</legend>
                <div class="table-wrapper">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="table-col">
                                    <label class="form-control __checkbox">
                                        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll(selectedAll)" />
                                        <span class="check"></span>
                                    </label>
                                </th>
                                <th class="table-col">Name</th>
                                <th class="table-col">Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table-item" ng-repeat="data in pb.currentEntity.attributes track by data.id" ng-class="{'selected': data === selectedItem}" context-menu data-target="pa_menu_{{$index}}" ng-click='selectItem(data)'>
                                <td class="table-col">
                                    <div data-role="input-control" class="input-control checkbox">
                                        <label class="form-control __checkbox">
                                            <input type="checkbox" ng-model="data.selected">
                                            <span class="check"></span>
                                        </label>
                                    </div>
                                </td>
                                <td class="table-col">
                                    <div class="form-input">
                                        <input type="text" required ng-model="data.name">
                                    </div>
                                    <ul role="menu" class="menu __context" id="pa_menu_{{$index}}">
                                        <li class="menu-item" ng-click='delete($index)'>
                                            <i class="menu-ico fa fa-trash-o"></i>Delete
                                        </li>
                                    </ul>
                                </td>
                                <td class="table-col">
                                    <div class="form-input">
                                        <input type="text" required ng-model="data.value">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
        </div>
    </div>
</div>